<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<body>
<div class="container">
    <div class="row" style="height: 150px"></div>
    <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
            <div class="page-header">
                <h1 class="text-center">Login</h1>
            </div>
            <form action="/AuthenticationServer/login" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" class="form-control" placeholder="用户名" name="username"
                               aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" class="form-control" placeholder="密码" name="password"
                               aria-describedby="basic-addon1">
                    </div>
                </div>
                <button type="submit" class="btn btn-default pull-right">登录</button>
            </form>
        </div>
        <div class="col-xs-4"></div>
    </div>
    <div class="row" style="height: 10px">
    </div>
    <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
            <div id="tip" class="alert alert-danger alert-dismissible hidden" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>提示!</strong>
                <span id="tip-message"></span>
            </div>
        </div>
        <div class="col-xs-4"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    function getQueryString(name) {
        var reg = new RegExp(‘(^|&)‘ + name + ‘=([^&]*)(&|$)‘, ‘i‘);
        var r = window.location.search.substr(1).match(reg);
        if (r !== null) {
            return unescape(r[2]);
        }
        return null;
    }
    if (getQueryString(‘authorization_error‘) !== null) {
        $(‘#tip-message‘).text(‘login password incorrect！‘);
        $(‘#tip‘).removeClass(‘hidden‘);
    } else if (getQueryString(‘access_denied‘) !== null) {
        $(‘#tip-message‘).text(‘You haven't login yet！‘);
        $(‘#tip‘).removeClass(‘hidden‘);
    } else {
        $(‘#tip‘).addClass(‘hidden‘);
    }
</script>
</html>